<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="not-ie" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content="NIM- Responsive One Page Creative Template" />
<meta name="keywords" content=""/>
<meta name="author" content="Metrothenes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>NIM- Responsive One Page Creative Template</title>
<!--Fav and touch icons-->
<link rel="shortcut icon" href="images/index/icons/favicon.html">
<link rel="apple-touch-icon" href="images/index/icons/apple-touch-icon.html">
<link rel="apple-touch-icon" sizes="72x72" href="images/index/icons/apple-touch-icon-72x72.html">
<link rel="apple-touch-icon" sizes="114x114" href="images/index/icons/apple-touch-icon-114x114.html">

<!--style sheet-->
<link rel="stylesheet" media="screen" href="template/index/css/bootstrap.css"/>
<link rel="stylesheet" media="screen" href="template/index/css/styles.css"/>

<link rel="stylesheet" type="text/css" href="template/index/css/opensans.css"/>
<link rel="stylesheet" type="text/css" href="template/index/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="template/index/css/prettyPhoto.css"/>

<!--JavaScript-->
<script type="text/javascript" src="js/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery/bootstrap.js"></script>
<script type="text/javascript" src="js/index/scripts.js"></script>
<script type="text/javascript" src="js/index/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/index/main.js"></script>
<script type="text/javascript" src="js/index/jquery.prettyPhoto.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34830156-1']);
  _gaq.push(['_setDomainName', 'project.pawthemes.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<style>
#menu {
	overflow: hidden;
	position: absolute;
	display: block;
	width: 48px;
	height: 48px;
	left: 0px;
	top: opx;
	position: absolute;
}

#nav-trigger {
	float: left;
	cursor: pointer;
	display: none;
	position: relative;
	z-index: 2;
	background-color: #f66;
}

.menu-icon {
	display: block;
	background: transparent url('{$site}/template/menu/img/menu-sprite.svg')
		no-repeat;
	background-size: auto 100%;
	height: 3em;
	width: 3em;
}

.active .icon-menu {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}

.icon-menu {
	background-position: 0 0;
}

.icon-menu {
	transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: -moz-transform 0.3s
		cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-webkit-transition: -webkit-transform 0.3s
		cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: -o-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
</style>
</head>
<body data-spy="scroll" data-offset="61" data-target=".nav-collapse">
<div class="loading"></div>
<!--Navigation-->
    <nav id="nav" class="navbar navbar-fixed-top ">
	<!-- Top Section -->
		<section class="top-section main-section">
		  <!-- container -->
		  <div class="container">
		    <div class="span12">
				<ul class="social-links">
					<li class="twitter"><a href="#">Twitter</a></li>
					<li class="facebook"><a href="#">facebook</a></li>
					<li class="linkedin"><a href="#">linkedin</a></li>
					<li class="viemo"><a href="#">viemo</a></li>
					<li class="dribbble"><a href="#">dribbble</a></li>
					<li class="gplus"><a href="#">gplus</a></li>
					<li class="rss"><a href="#">rss</a></li>			
				</ul>
		    </div>
		    <!-- toggle -->
		    <a href="javascript:void(0);" class="toggle"></a> 
			</div>
		  <!-- end container -->
		</section>  
	<!-- Top Section end-->
        <div class="navbar-inner">
            <div class="container">
	            <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
	                  <span class="icon-bar"></span>
	                  <span class="icon-bar"></span>
	                  <span class="icon-bar"></span>
	            </button>

	                <a href="index-2.html" class="brand"><img src="images/index/logo.png" alt="Nim">
	                </a>

	            <div class="nav-collapse collapse">
			        <ul class="nav pull-right">
			            <li class="active"><a href="#home">Home</a></li>
			            <li ><a href="#work">work</a></li>
			            <li ><a href="#service">Service</a></li>			    
			            <li ><a href="#about">About</a></li>
			            <li ><a href="#contact">Contact</a></li>
			        </ul>
	   			</div>
            </div>
        </div>
    </nav>
<!--Navigation End-->
<!--Home-->
    	<section id="home" class="section home">
            <div class="container">
                <div class="row"> 
	                <div class="spn12">
	                	<div class="title-unit">
	                		<img src="images/index/nim_benner.png" alt="Brand">
		                	<h2>Awesome Minimal Creative Theme For Creative Studio</h2>
		                	<h2>We Are Trusted By Thousands Of Smart Clients</h2>
	               	    </div>
	               	    
				         
	               	 </div>
                 </div>
            </div>
		</section>
<!--Home End-->
<!--Portfolio -->
	<section id="work" class="section work">
            <div class="container">
            	<!-- section heading -->
	                <div class="row">
	                	<div class="span12 header">
	                		
	                	    <hr>
	                	</div>
	                </div>
                <!-- section heading end -->
				<!-- Portfolio -->
				<div class="row">
					<div class="span12">
	                    <div id="options" class="clearfix">
	                          <ul id="filters" class="option-set clearfix" data-option-key="filter">
	                            <li><a href="#filter" data-option-value="*" class="selected">all</a></li>
	                            <li><a href="#filter" data-option-value=".webdesign">Restaurant</a></li>
	                            <li><a href="#filter" data-option-value=".uidesign">Pub</a></li>
	                            <li><a href="#filter" data-option-value=".branding">Bar</a></li>     
	                            <!-- <li><a href="#filter" data-option-value=".logodesign">logodesign</a></li>-->
	                   </ul>
	                     </div> <!-- #options -->					
						<!-- Portfolio Items -->			
							<div id="portfolio" class="clearfix">
									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/1.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/1.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block uidesign">
										<div class="view view-first">
											<img src="images/index/works/2.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/2.jpg"></a>
											</div>
										</div>
									</div>				
								
									<div class="block branding">
										<div class="view view-first">
										<img src="images/index/works/3.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/3.jpg"></a>
											</div>
										</div>
									</div>
									
									<div class="block uidesign">
										<div class="view view-first">
											<img src="images/index/works/4.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/4.jpg"></a>
											</div>
										</div>
									</div>
					
									<div class="block uidesign">
										<div class="view view-first">
											<img src="images/index/works/5.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/5.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/6.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/6.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block uidesign">
										<div class="view view-first">
											<img src="images/index/works/7.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/7.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/8.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/8.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/9.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/1.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/10.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/2.jpg"></a>
											</div>
										</div>
									</div>

									<div class="block webdesign">
										<div class="view view-first">
											<img src="images/index/works/11.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/3.jpg"></a>
											</div>
										</div>
									</div>
									
									<div class="block uidesign">
										<div class="view view-first">
											<img src="images/index/works/12.jpg" alt="">
											<div class="mask">
												<a class="info" data-rel="prettyPhoto" href="images/index/big/4.jpg"></a>
											</div>
										</div>
									</div>
							  </div>
							 <!-- Portfolio items end -->
						</div>
				</div>
			   <!-- Portfolio end -->
            </div>		
	</section>
<!--Portfolio End -->
        
<!--About -->
	<section id="about" class="section about">
        <div class="container">
            	<!-- section heading -->
	                <div class="row">
	                	<div class="span12 header">
	                		<h2>About</h2>
	                		<span>We Are an Enthusiastic Group of Creative Folks </span>
	                	    <hr>
	                	</div>
	                </div>
                <!-- section heading end -->
                <!-- Team -->
                <div class="row">
                	<div class="team">
                		<div class="person">
                			<img src="images/index/team/1.png" alt="">
                			<div class="title">John Doe - <span>Designer</span></div>
                			<p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare</p>
                			<ul class="social-links">
                				<li class="twitter"><a href="#">twitter</a></li>
                				<li class="facebook"><a href="#">facebook</a></li>
                				<li class="dribbble"><a href="#">dribbble</a></li>
                			</ul>
                			<hr>
                		</div>
                		<div class="person">
                			<img src="images/index/team/2.png" alt="">
                			<div class="title">John Doe - <span>Designer</span></div>
                			<p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare</p>
                			<ul class="social-links">
                				<li class="twitter"><a href="#">twitter</a></li>
                				<li class="facebook"><a href="#">facebook</a></li>
                				<li class="dribbble"><a href="#">dribbble</a></li>
                			</ul>
                			<hr>
                		</div>
                		<div class="person">
                			<img src="images/index/team/3.png" alt="">
                			<div class="title">John Doe - <span>Designer</span></div>
                			<p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare</p>
                			<ul class="social-links">
                				<li class="twitter"><a href="#">twitter</a></li>
                				<li class="facebook"><a href="#">facebook</a></li>
                				<li class="dribbble"><a href="#">dribbble</a></li>
                			</ul>  
                			<hr>              			
                		</div>                		                		
                	</div>
                </div>
                <!-- Team end -->
                </div>	
	</section>
<!--About end -->
<!--Contact -->
	<section id="contact" class="section contact">
        <div class="container">
            	<!-- section heading -->
	                <div class="row">
	                	<div class="span12 header">
	                		<h2>Contact</h2>
	                		<span>Feel Free to Contact Us for Any Inquire at Anytime</span>
	                	    <hr>
	                	</div>
	                </div>
                <!-- section heading end -->
                <!-- Contact section -->
                <div class="row contact-box">
                	<div class="span6"><img src="images/index/map_alt.png" alt=""/></div>
                	<div class="span4">
						<div id="note"></div>
						<form class="form" id="ajax-contact-form" action="javascript:alert('Was send!');">
						<input type="text" name="name" class="span4" placeholder="Name" required/>
						<input type="text" class="span4" name="email" placeholder="Email" required/>
						<textarea type="text" name="message" placeholder="Message" rows="8" class="span4"></textarea>
						<button type="submit"  class="btn btn-success">SUBMIT</button>
						</form>
                	</div>
                </div>
                <!-- Contact section end -->
        </div>		
	</section>
<!--Contact end-->
<!-- Footer -->
<footer>
	<div class="container">
		<div class="copyright pull-left">&copy; <span>NiM</span> 2013, All Right Recived</div>
		<div class="callus pull-right"><i class="icon-phone"></i><span>(000)123-456789</span></div>
	</div>
</footer>
<!-- Footer end -->
<!-- Scroll-top -->
  <a class="scroll-top" href="#" title="Scroll to top">Top</a>
<!-- Scroll-top end -->
</body>
</html>